<template>
	<div class="acti_container">
		<div class="acti_nav">
			<el-breadcrumb separator="/">
			  <el-breadcrumb-item :to="{ name: 'home' }">首页</el-breadcrumb-item>
			  <el-breadcrumb-item :to="{ name: 'activity' }">活动报名中心</el-breadcrumb-item>
			  <el-breadcrumb-item>{{this.activity.title}}</el-breadcrumb-item>
			  <el-breadcrumb-item>付款</el-breadcrumb-item>
			</el-breadcrumb>
		</div>
		<div class="acti_sign">
			<div class="acti_intro">
				<h4 class="title">活动基本信息</h4>
				<div class="acti_intro_del">
					<div class="acti_intro_del_img">
						<img src="../../assets/activity.jpg">
					</div>
					<div class="acti_intro_del_content">
						<h4>{{this.activity.title}}</h4>
						<p>
						<span>活动时间：{{this.activity.releaseTime}} - {{this.activity.endTime}}</span></p>
						<p>{{this.activity.content}}
						</p>
					</div>
				</div>
			</div>
			<div class="acti_info" v-loading="isLoad">
				<h4 class="title">报名者信息</h4>
				<div class="acti_info_del">
					<div class="info_basic">
						<h5 class="acti_info_del_title">
							基本信息
						</h5>
						<p><span>姓名：</span> {{this.participater.realname}}</p>
						<p>
							<span>婚姻状态:</span> {{this.participater.maritalStatus}}
						</p>
						<p>
							<span>所在城市:</span> {{this.participater.origin}}
						</p>
					</div>
					<div class="contact_way">
						<h5 class="acti_info_del_title">
							联系方式
						</h5>
						<p>
							<span>手机号：</span>{{this.contactWay.phone || ''}}
						</p>
						<p>
							<span>邮箱:</span> {{this.contactWay.email || ''}}
						</p>
					</div>

				</div>
			</div>
			<div class="acti_money">
				<h4 class="title">活动收费详情</h4>
				<div class="acti_money_del">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra justo commodo. Proin sodales pulvinar tempor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam fermentum, nulla luctus pharetra vulputate, felis tellus mollis orci, sed rhoncus sapien nunc eget.</div>
			</div>
			<div class="acti_pay">
				<p>
					活动总费用<span class="acti_price">￥{{this.activity.cost}}</span>
				</p>
				<p><el-button type="primary" size="large" @click="payMoney()" :loading="isPay">确认支付</el-button></p>
			</div>
		</div>
	</div>
</template>
<script>
	export default {
		name: 'activitySign',
		data() {
			return {
				activity: {
					title: '',
					releaseTime: '',
					endTime: '',
					content: ''
				},
				participater: {
					realname: '',
					maritalStatus: '',
					origin: ''
				},
				contactWay: {
					phone: '',
					email: ''
				},
				isLoad: true,
				isPay: false,
			}
		},
		methods: {
			getActivityInfo: function(){
				this.activity = this.$route.params.activity;
			},
			getParticipater: function(){
				this.$http({
				  method: 'get',
				  url: '/activity/participater'
				}).then((response)=>{
					this.isLoad = false;
				    if(response.data && response.data.status === 'SUCCESS'){
						const { object } = response.data;
						if(object.length!==0){
							if(object[0]!==null) {
								this.participater = object[0];
							}
							this.contactWay = object[1];
						}
				    }
				})
				.catch(function (error) {
				   console.log(error);
				});
			},
			payMoney: function(){
				this.isPay = true;
				this.$http({
				  method: 'post',
				  url: '/activity/signUp',
				  params: {
				  	acti_id: this.activity.id
				  }
				}).then((response)=>{
					this.isPay = false;
					const { object,message } = response.data;
				    if(response.data.status === 'SUCCESS'){
						this.$alert('订单号为'+object.num,message, {
				          confirmButtonText: '确定',
				          callback: action => {
				          	this.$router.push({
				          		name: 'activity'
				          	})
				          }
				        });
				    }else {
				    	this.$message.error(message);
				    }
				})
				.catch(function (error) {
				   console.log(error);
				});
			}
		},
		created: function(){
			this.getParticipater();
			this.getActivityInfo();
		}
	}
</script>
<style scoped>
	.acti_container {
		width: 80%;
		margin: 10px auto;
	}
	.acti_nav {
		margin: 10px;
		font-size: 1.5rem!important;
	}
	.acti_intro_del {
		font-size: 0px;
	}
	.acti_intro_del_img {
		display: inline-block;
		max-height: 400px;
		width: 30%;
	}
	.acti_intro_del_img img {
		max-height: 100%;
		max-width: 100%;
	}
	.acti_intro_del_content {
		display: inline-block;
		padding: 0px 30px;
		width: 60%;
		font-size: 1.0rem;
		vertical-align: bottom;
	}
	.acti_intro_del_content p {
		margin-bottom: 0px;
	}
	.acti_intro {
		margin: 40px auto;
	}
	.title:before {
		content: url('../../assets/activityLogo.png');
		width: 100px;
		margin-right: 10px;
	}
	.acti_info {
		margin: 20px auto;
	}
	
	.acti_info_del {
	    border: 1px solid rgba(233, 30, 99, 0.14);
	    box-shadow: 2px 2px 20px rgba(158, 158, 158, 0.51);
	    padding: 20px;
	    border-radius: 15px;
	}
	.acti_info_del>div {
		margin: 30px 10px 20px 10px;
	}
	.acti_info_del p {
		text-indent: 2.0rem;
	}

	.acti_info_del_title{
		padding-left: 5px;
		border-left: 5px solid #E91E63;
	}

	.acti_money {
		margin: 20px auto;
	}
	.acti_money_del {
		border: 1px solid rgba(233, 30, 99, 0.14);
	    box-shadow: 2px 2px 20px rgba(158, 158, 158, 0.51);
	    padding: 20px;
	    border-radius: 15px;
	}

	.acti_pay {
		margin: 30px;
		text-align: right;
	}
	.acti_price{
		color:#F06079;
		font-size: 4rem;
	}
</style>